<template>
  <view class="wrapper">
    <swiper v-if="detail.image" class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500">
      <swiper-item
          v-for="(item, index) in detail.image"
          :key="index"
          class="swiper-item"
      >
        <view class="image">
          <u--image width="730rpx" height="730rpx" :fade="true" duration="150" lazy-load mode="scaleToFill"
              :src="baseUrl + item"></u--image>
        </view>
      </swiper-item>
    </swiper>
    <view class="desc" v-if="detail.user">
      <view class="text">
        <view class="name">{{detail.user.nickname}}</view>
        <view class="time">发布于 {{detail.create_time}}</view>
      </view>
      <view class="follow" @click="handleFollow">{{detail.has_follow ? '已关注' : '关注'}}</view>
    </view>
    <view class="content">
      <view class="text" v-html="detail.inText" v-if="detail.inText"></view>
      <view class="image-list" v-if="detail.inImages && detail.inImages.length > 0">
        <view class="image" v-for="(item, index) in detail.inImages" :key="index">
          <u--image lazy-load width="100%" height="100%" :fade="true" duration="450" mode="widthFix" :src="baseUrl + item"></u--image>
        </view>
      </view>
    </view>
    <v-comment :list="detail.commentShow" />
    <view class="footer">
      <view class="c" @click="handleComment">
        说点什么...
      </view>
      <view class="num">
        <view class="like" @click.stop="handleLike()">
          <u-icon
              size="50"
              :name="baseUrl + '/mini/like-active.png'"
              v-if="detail.has_like"
          ></u-icon>
          <u-icon
              size="50"
              :name="baseUrl + '/mini/like.png'"
              v-else
          ></u-icon>
          <view class="num" v-if="detail.like > 0">{{detail.like}}</view>
        </view>
        <view class="fav" @click.stop="handleFav()">
          <u-icon
              size="50"
              :name="baseUrl + '/mini/fav-active.png'"
              v-if="detail.has_fav"
          ></u-icon>
          <u-icon
              size="50"
              :name="baseUrl + '/mini/fav.png'"
              v-else
          ></u-icon>
          <view class="num" v-if="detail.fav > 0">{{detail.fav}}</view>
        </view>
        <view class="cx" @click.stop="handleComment()">
          <u-icon
              size="50"
              :name="baseUrl + '/mini/comment.png'"
          ></u-icon>
          <view class="num" v-if="detail.comment > 0">{{detail.comment}}</view>
        </view>
      </view>
    </view>
    <!-- 发表评论 -->
    <u-popup :show="show" @close="show = false" :zIndex="999999">
      <view class="txt">
        <u--textarea focus confirmType="return" v-model="txt" placeholder="说点什么" height="200"></u--textarea>
        <u-button class="btn" :color="activeColor" @click="saveComment" text="发送"></u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import color from '@/config/color.js'
import config from '../../config/config'
import base64 from '../../util/base64'
import Comment from './components/Comment'

import Material from '../../api/material'
const materialModel = new Material()

export default {
  components: {
    'v-comment': Comment
  },
  data() {
    return {
      id: 0,
      detail: {},
      baseUrl: config.baseUrl,
      activeColor: color.main_color,
      show: false,
      txt: ''
    }
  },
  methods: {
    fetch() {
      materialModel.detail({ id: this.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
        this.detail = data.model
        uni.setNavigationBarTitle({
          title: this.detail.title
        })
      })
    },
    // 关注
    handleFollow() {
      const follow = +(!this.detail.has_follow)
      materialModel.follow({ id: this.id, follow }).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功'
        })
        this.detail.has_follow = follow
      })
    },
    // 点赞
    handleLike() {
      const like = +(!this.detail.has_like)
      this.detail.has_like = like
      like ? this.detail.like++ : this.detail.like--
      materialModel.saveLike({ ...this.detail }).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功'
        })
      })
    },
    // 收藏
    handleFav() {
      const fav = +(!this.detail.has_fav)
      this.detail.has_fav = fav
      fav ? this.detail.fav++ : this.detail.fav--
      materialModel.saveFave({ ...this.detail }).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功'
        })
      })
    },
    // 评论
    handleComment() {
      this.show = true
    },
    saveComment() {
      this.show = false
      if (!this.txt) {
        return
      }
      materialModel.saveComment({ id: this.detail.id, txt: this.txt }).then(() => {
        uni.showToast({
          icon: 'none',
          title: '发送成功,等待审核中!'
        })
        this.txt = ''
        this.detail.comment++
      })
    }
  },
  onLoad(options) {
    this.id = options.id
    this.fetch()
  }
}


</script>

<style lang="scss" scoped>
.txt {
  padding: 20rpx;
  .btn {
    margin-top: 20rpx;
  }
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(80rpx + env(safe-area-inset-bottom));
  background: white;
  border-top: 1rpx solid #f1f2f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  .c {
    width: 260rpx;
    box-sizing: border-box;
    padding: 10rpx 20rpx;
    font-size: 24rpx;
    color: #707070;
  }
  .num {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .like, .fav, .cx {
      display: flex;
      .num {
        margin-left: 10rpx;
        font-size: 26rpx;
        font-weight: 700;
        color: #707070;
      }
    }
  }
}
.content {
  margin: 20rpx 0;
  ::v-deep {
    image {
      width: 100%;
    }
  }
}
.wrapper {
  background: white;
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  .swiper {
    width: 730rpx;
    height: 730rpx;
    .image {
      width: 730rpx;
      height: 730rpx;
    }
  }
  .desc {
    padding: 20rpx 0;
    display: flex;
    justify-content: space-between;
    .text {
      display: flex;
      .name, .time {
        font-size: 24rpx;
        color: #313131;
      }
      .time {
        color: #969696;
        margin-left: 20rpx;
      }
    }
    .follow {
      color: white;
      display: inline-block;
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      background: $main_color;
      font-size: 26rpx;
    }
  }
}
</style>
